<template>
	<view class="">
		<view class="tn-padding-top-sm tn-padding-left-sm tn-padding-right-sm top-text">
			为了孩子的服药安全，请进行签名，以确保是本人进行操作
		</view>
		<view class="tn-padding-sm canvas-view">
			<view ref="borderview" class="border-view">
				<view class="pl-text">
					手写签名区域
				</view>
				<zwp-draw-pad class="zwp-view" ref="drawview" :width="width" :height="height" />
			</view>
		</view>
		
		<view class="tn-padding-sm">
			<tn-button  width="50%" backgroundColor="#C6D1D8" @click="clear">重新签名</tn-button>
			<tn-button class="margin-left-sm" width="50%" backgroundColor="#01BEFF" @click="addFunction">提交签名</tn-button>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	import zwpDrawPad from '../../uni_modules/zwp-draw-pad/components/zwp-draw-pad/zwp-draw-pad.vue'
	export default {
		name: 'youerruyuan',
		components:{zwpDrawPad},
		data(){
			return {
				width: 400,
				height: 500,
				fuyaoInfo: {}
			}
		},
		onShow() {
			
			let detail = uni.getStorageSync('fydjInfo')
			if(detail){
				this.fuyaoInfo = detail
			}
		},
		mounted() {
			this.$nextTick(() => {
				let width = uni.getSystemInfoSync().windowWidth;
				this.width = width - 22
			})
		},
		methods:{
			addFunction(){
				if(!this.$refs.drawview.originData.length){
						this.$refs.toast.show({
						  title: '',
						  content: '未检测到签名，请先签名',
						  icon: 'fail',
						  image: '',
						  duration: 1500
						})
					return
				}
				this.$refs.drawview.save().then(res => {
					this.fuyaoInfo.autographImg = res.tempFilePath
					console.log('保存图片的地址', res.tempFilePath)
					let url = '/MRegister/Register'
					if(this.fuyaoInfo.id){
						url = '/MRegister/Update'
					}
					this.request({
						url: url,
						method: 'post',
						params: this.fuyaoInfo
					}).then(res => {
						if(res.code == 200){
							this.$refs.toast.show({
								title: '',
								content: '操作成功',
								icon: 'success',
								image: '',
								duration: 1500
							})
							uni.navigateBack({delta:2});
						}else{
							this.$refs.toast.show({
								title: '',
								content: res.message,
								icon: 'fail',
								image: '',
								duration: 1500
							})
						}
					})
				})
			},
			  /**清空画布 */
			  clear: function() {
				  this.$refs.drawview.init()
			  },
			
		}
	}
</script>

<style lang="scss" scoped>
	.canvas-view{
		overflow: hidden;
	}
	.border-view{
		border: 1px dotted #dddddd;
		position: relative;
		width: 100%;
		height: 70%;
	}
	.zwp-view{
		width: 100%;
		height: 100%;
	}
	.pl-text{
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		text-align: center;
		color: #dddddd;
	}
	.top-text{
		font-size: 12rpx;
		color: #555555;
	}
</style>